<template>
  <div class="test-container">
    <div class="test-container-header flex-space-be">
      <div class="class-name">
        <span
          >当前课程：
          {{ checkedBookData.edition_name + "-" + checkedBookData.grade_name }}
        </span>
      </div>
      <div>
        <span class="mr20">本模块共有{{ paperData.total_num }}个生词 </span>
        <el-button
          class="button"
          :class="{ 'button-bg-second': !turnOffStatus }"
          style="margin-right:5px"
          @click="goReview(0)"
          >整体复习
        </el-button>
        <span>
          <el-button
            class="button"
            :class="{ 'button-bg-second': turnOffStatus }"
            @click="goReview(1)"
            >单词表
          </el-button>
        </span>
        <el-button
          class="download-btn click"
          @click="downloadData"
          :disabled="paperData.total_num <= 0"
        >
          <i class="font_family icon-Group-"></i>
          <!-- <img class="mr5" src="../../../assets/img/download.png" alt="" /> -->
          <span>下载</span>
        </el-button>
      </div>
    </div>
    <div class="info-table">
      <div
        v-if="turnOffStatus"
        class="clear-float common-table common-pagination"
      >
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            :index="indexMethod"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="phonetic_american" label="音标">
            <template slot-scope="scope">
              <div
                class="table-cell click"
                @click="playAudio('audio' + scope.row.word_id)"
              >
                <span v-if="scope.row.phonetic">
                  [{{ scope.row.phonetic }}]
                </span>
                <span v-else>-</span>
                <audio
                  :ref="'audio' + scope.row.word_id"
                  :src="baseURL + scope.row.audioUrl"
                ></audio>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="word_name" label="单词">
            <template slot-scope="scope">
              <div
                class="click"
                @click="playAudio('audio' + scope.row.word_id)"
              >
                {{ scope.row.word_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="paraphrase" label="词义">
            <template slot-scope="scope">
              <div>
                <p v-for="(item, index) in scope.row.paraphrase" :key="index">
                  {{ item }}
                </p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          v-if="paperData.total_page > 1"
          class="fr"
          background
          :page-size="paperParams.pageSize"
          layout="prev, pager, next"
          :total="paperData.total_num"
        >
        </el-pagination>
      </div>
      <!-- 整体复习 -->
      <div
        v-else
        class="clear-float common-table common-pagination overall-arrangement
"
      >
        <div class="tab_pronounce_box">
          <span
            class="tab_pronounce"
            @click="isActive = 0"
            :class="{ active: isActive == 0 }"
            >美音</span
          >
          <span
            class="tab_pronounce"
            @click="isActive = 1"
            :class="{ active: isActive == 1 }"
            >英音</span
          >
        </div>
        <div style="display: flex; justify-content: center;">
          <div class="card_box">
            <div
              class="content"
              v-for="(item, index) in tableData"
              :key="item.id"
              @click="turnOff(index)"
              :class="{ turnOff: turnOffStatusArr[index] == 1 }"
            >
              <span class="card front">
                <span class="text">
                  <span>{{ item.word_name }}</span>
                </span>
                <!-- <i class="img"></i> -->
                <span class="img" @click.stop="() => {}">
                  <AudioPlay
                    v-if="isActive"
                    class="fr click"
                    ref="audioPlay"
                    :type="0"
                    :audioSrc="baseURL + item.en_url"
                    @onIsPlay="onIsPlayWord"
                  ></AudioPlay>
                  <AudioPlay
                    v-else
                    class="fr click"
                    ref="audioPlay"
                    :type="0"
                    :audioSrc="baseURL + item.us_url"
                    @onIsPlay="onIsPlayWord"
                  ></AudioPlay>
                </span>
              </span>
              <span class="card back">
                <span
                  v-show="item.status == 0 || item.status == null"
                  class="err"
                  @click.stop="autonomouslyPass(item, 0)"
                  >✘</span
                >
                <span
                  v-show="item.status == 1 || item.status == null"
                  class="sucsses"
                  @click.stop="autonomouslyPass(item, 1)"
                  >✔</span
                >
                <span class="text">
                  <span v-if="item.paraphrase.length == 1"
                    >{{ item.paraphrase[0] | filterSplit }}<br />{{
                      item.paraphrase[0].substring(9)
                    }}</span
                  >
                  <span
                    v-else
                    v-for="(item1, index) in item.paraphrase"
                    :key="index"
                    >{{ item1 | filterTxt }}<br
                  /></span>
                </span>
                <!-- <i class="img"></i> -->
                <span class="img" @click.stop="() => {}">
                  <AudioPlay
                    v-if="isActive"
                    class="fr click"
                    ref="audioPlay"
                    :type="0"
                    :audioSrc="baseURL + item.en_url"
                    @onIsPlay="onIsPlayWord"
                  ></AudioPlay>
                  <AudioPlay
                    v-else
                    class="fr click"
                    ref="audioPlay"
                    :type="0"
                    :audioSrc="baseURL + item.us_url"
                    @onIsPlay="onIsPlayWord"
                  ></AudioPlay>
                </span>
              </span>
            </div>
          </div>
        </div>
        <el-pagination
          style="margin: 0px 30px 20px;"
          @current-change="handleCurrentChange"
          v-if="paperData.total_page > 1"
          class="fr"
          background
          :page-size="paperParams.pageSize"
          layout="prev, pager, next"
          :total="paperData.total_num"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
import {
  getTodayStrangeWord,
  updateStrangeWord,
  getTotalStrangeWord,
  updateTotalStrangeWord,
} from "@/api/index";

export default {
  components: {
    AudioPlay,
  },
  data() {
    return {
      isActive: 0,
      isPlay: false,
      turnOffStatus: false,
      turnOffStatusArr: new Array(12).fill(0), //0中文 1英文
      tableData: [],
      paperData: {
        review_num: 0,
      },
      paperParams: {
        pageNum: 1,
        pageSize: 12,
      },
      checkedBookData: {},
      categoryObj: {
        0: "记忆",
        1: "词听",
        2: "听写",
        3: "默写",
      },
    };
  },
  methods: {
    autonomouslyPass(item, status) {
      if(item.status != null){
        return
      }
      this.$set(item, "status", status);
      if (this.type == 0) {
        updateStrangeWord({
          wordId: item.word_id,
          status,
          bookId: this.bookId,
        });
      } else {
        updateTotalStrangeWord({
          wordId: item.word_id,
          status,
          bookId: this.bookId,
        });
      }
    },
    // 音频
    onIsPlayWord(isPlay) {
      this.isPlay = isPlay;
    },
    // 翻转
    turnOff(index) {
      if (this.turnOffStatusArr[index]) {
        this.$set(this.turnOffStatusArr, index, 0);
      } else {
        this.$set(this.turnOffStatusArr, index, 1);
      }
    },
    downloadData() {
      let data = {
        page_require: {
          page_num: 1,
          page_size: 99999,
        },
        category: 0,
        book_id: this.bookId,
      };
      if (this.type == 0) {
        getTodayStrangeWord(data).then((res) => {
          if (res.code == 200 && res.data) {
            let listData = res.data.word_info_list.map((item) => {
              return {
                wordName: item.word_name,
                phonetic:
                  this.$store.getters.isBritish == 1
                    ? item.phonetic_british
                      ? `[${item.phonetic_british}]`
                      : ""
                    : item.phonetic_american
                    ? `[${item.phonetic_american}]`
                    : "",
                paraphrase: item.paraphrase.split("\n").join(";\r\n"),
              };
            });
            this.export2Excel(listData);
          }
        });
      } else if (this.type == 1) {
        getTotalStrangeWord(data).then((res) => {
          if (res.code == 200 && res.data) {
            let listData = res.data.word_info_list.map((item) => {
              return {
                wordName: item.word_name,
                phonetic:
                  this.$store.getters.isBritish == 1
                    ? item.phonetic_british
                      ? `[${item.phonetic_british}]`
                      : ""
                    : item.phonetic_american
                    ? `[${item.phonetic_american}]`
                    : "",
                paraphrase: item.paraphrase.split("\n").join(";\r\n"),
              };
            });
            this.export2Excel(listData);
          }
        });
      }
    },
    //

    export2Excel(listData) {
      require.ensure([], () => {
        const {
          export_json_to_excel,
        } = require("@/assets/js/vendor/Export2Excel");
        const tHeader = ["单词", "音标", "词义"]; //生成Excel表格的头部标题栏
        const filterVal = ["wordName", "phonetic", "paraphrase"]; //生成Excel表格的内容栏（根据自己的数据内容属性填写）
        const list = listData; //需要导出Excel的数据
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(
          tHeader,
          data,
          `智能${this.categoryObj[this.type]}-记忆追踪`
        ); //这里可以定义你的Excel表的默认名称
      });
    },
    // 参数过滤
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    playAudio(refName) {
      // this.$pauseAllAudio();
      if (this.$refs[refName]) {
        this.$refs[refName].play();
      }
    },
    indexMethod(index) {
      return (
        (this.paperParams.pageNum - 1) * this.paperParams.pageSize + index + 1
      );
    },
    goReview(tag) {
      if (tag == 0) {
        this.turnOffStatus = false;
        return;
      }
      if (tag == 1 && !this.turnOffStatus) {
        this.turnOffStatus = true;
        return;
      }
    },

    getTotalStrangeWord() {
      let data = {
        page_require: {
          page_num: this.paperParams.pageNum,
          page_size: this.paperParams.pageSize,
        },
        category: 0,
        book_id: this.bookId,
      };
      getTotalStrangeWord(data).then((res) => {
        if (res.code == 200 && res.data) {
          if (
            res.data.word_info_list.length == 0 &&
            this.paperParams.pageNum > 1
          ) {
            this.getTotalStrangeWord();
            return;
          }
          this.paperData = res.data;
          // this.$store.getters.isBritish
          this.tableData = res.data.word_info_list.map((item) => {
            item.phonetic =
              this.$store.getters.isBritish == 1
                ? item.phonetic_british
                : item.phonetic_american;
            item.audioUrl =
              this.$store.getters.isBritish == 1 ? item.en_url : item.us_url;
            item.paraphrase = item.paraphrase.split("\n");
            return item;
          });
        }
      });
    },

    getTodayStrangeWord() {
      let data = {
        page_require: {
          page_num: this.paperParams.pageNum,
          page_size: this.paperParams.pageSize,
        },
        category: 0,
        book_id: this.bookId,
      };
      getTodayStrangeWord(data).then((res) => {
        if (res.code == 200 && res.data) {
          if (
            res.data.word_info_list.length == 0 &&
            this.paperParams.pageNum > 1
          ) {
            this.getTodayStrangeWord();
            return;
          }
          this.paperData = res.data;
          // this.$store.getters.isBritish
          this.tableData = res.data.word_info_list.map((item) => {
            item.phonetic =
              this.$store.getters.isBritish == 1
                ? item.phonetic_british
                : item.phonetic_american;
            item.audioUrl =
              this.$store.getters.isBritish == 1 ? item.en_url : item.us_url;
            item.paraphrase = item.paraphrase.split("\n");
            return item;
          });
        }
      });
    },
    handleCurrentChange(value) {
      this.paperParams.pageNum = value;
      if (this.type == 0) {
        this.getTodayStrangeWord();
      } else if (this.type == 1) {
        this.getTotalStrangeWord();
      }
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    if (this.type == 0) {
      this.getTodayStrangeWord();
    } else if (this.type == 1) {
      this.getTotalStrangeWord();
    }
  },
  filters: {
    filterTxt(txt) {
      if (txt.length > 8) {
        return txt.substring(0, 9) + "...";
      }
      return txt;
    },
    filterSplit(txt) {
      if (txt.length > 8) {
        return txt.substring(0, 9);
      }
      return txt;
    },
  },
  props: {
    type: {
      type: Number, // 0 今日生词 1 整体复习
    },
    bookId: {
      type: Number,
    },
  },
};
</script>
<style scoped>
.overall-arrangement {
  width: 960px;
  height: 578px;
  background: #ffffff;
  border: 1px solid #ebeef5;
  border-top: none;
}
.test-container >>> .tab_pronounce_box {
  text-align: right;
  padding-right: 131px;
}

.test-container >>> .tab_pronounce {
  margin-left: 16px;
  display: inline-block;
  width: 49px;
  height: 41px;
  background: #ffffff;
  border: 1px solid #ebeef5;
  border-top: none;
  border-radius: 0px 0px 4px 4px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #363636;
  line-height: 41px;
  text-align: center;
}

.test-container >>> .card_box {
  width: 856px;
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
}

.test-container >>> .content {
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
}

.test-container >>> .card {
  /* position: relative; */
  backface-visibility: hidden;
  /* background: url("~@/assets/img/card-bg.png"); */
  background: #ec7b32;
  margin: 8px 7px;
  width: 200px;
  height: 120px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test-container >>> .card .text {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}

.test-container >>> .card .img {
  /* background: url("~@/assets/img/card-play.png"); */
  position: absolute;
  bottom: 17px;
  right: 17px;
  width: 24px;
  height: 21px;
}

.test-container >>> .front .img {
  bottom: 25px;
}

.back {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  transform: rotateY(180deg);
}
.back .err {
  cursor: pointer;
  font-size: 20px;
  color: #ffff;
  position: absolute;
  left: 10px;
  top: 5px;
}
.back .sucsses {
  cursor: pointer;
  font-size: 20px;
  color: #ffff;
  position: absolute;
  right: 10px;
  top: 5px;
}

.turnOff {
  transform: rotateY(180deg);
}

.active {
  color: #ffffff !important;
  background: #ec7b32 !important;
}
</style>
